<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" th:href="@{/js/layui-v2.4.5/layui/css/layui.css}" media="all" />
	<link rel="stylesheet" th:href="@{/css/public.css}" media="all" />
</head>
<body class="childrenBody"  style="-webkit-backface-visibility: hidden;">
<form class="layui-form">
	<blockquote class="layui-elem-quote quoteBox">
		<form class="layui-form">
			<div class="layui-inline">
				<div class="layui-input-inline">
					<input type="text" class="layui-input searchVal" placeholder="角色名"  name = "roleName" id = "roleName"/>
				</div>
				<a class="layui-btn search_btn" lay-submit data-type="reload" lay-filter="query">搜索</a>
			</div>
			<div class="layui-inline">
				<a class="layui-btn layui-btn-normal addNews_btn" id ="addRole">添加角色</a>
			</div>

		</form>
	</blockquote>
	<table id="roleList" lay-filter="roleList"></table>

	<!--操作-->
	<script type="text/html" id="newsListBar">
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
	</script>
</form>
<script th:src="@{/js/jquery-2.1.1.min.js}"></script>
<script th:src="@{/js/layui-v2.4.5/layui/layui.js}"></script>
<script th:src="@{/js/utils.js}"></script>

<script type="text/javascript">
	layui.use(['table','form'], function(){
	var table = layui.table,
        form = layui.form;
	var mytable = table.render({
		elem: '#roleList'
		,url:path+"/role/queryRoles"
		,title: '角色'
        ,where:{    //条件
            "params['roleName']":$("#roleName").val()
        }
        ,cols: [ [ //标题栏
            {field: 'roleName', title:'角色名', width:120}
            ,{field: 'roleDesc', title:'描述', width:150}
            ,{field: 'remark', title:'备注', width:150}
            ,{field: 'createTime', title:'创建时间', width:300}
            ,{field: 'modTime', title:'修改时间', width:300}
            ,{ title:'操作', toolbar: '#newsListBar', width:180}
        ]]

		,page: true
//		,response: {
//		statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
//		}
        ,even: true
        ,page: {   //自定义分页条
            limit: 10
            ,curr: 1
            ,theme: '#5FB878'
            ,first: '首页'
            ,last: '尾页'
            ,prev: '<em><i class="layui-icon">&#xe603;</i></em>'
            ,next: '<em><i class="layui-icon">&#xe602;</i></em>'
            ,layout: [ 'prev', 'page', 'next', 'skip']
            ,hash:"offset"
        }
        ,done: function(res, curr, count){

        }
        ,request: {
            pageName: 'offset' //页码的参数名称，默认：page
            ,limitName: 'limit' //每页数据量的参数名，默认：limit
        }
		});



	var tableReload = function (data) {
            mytable.reload({
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where:{"params['roleName']":data.roleName}
                , done: function (res, curr, count) {

                }
            })

	}
	/**
	 * 监听查询按钮
	 *
	 */
	form.on('submit(query)', function(data){
		tableReload(data.field);
	});






	//监听操作工具栏
	table.on('tool(roleList)', function(obj){

		var rowData = obj.data; //获得当前行数据
		var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

		var tr = obj.tr; //获得当前行 tr 的DOM对象
		switch (layEvent){
			case 'edit':
				addOrUpdateRole(true,rowData.id)
				break;
			case 'del':
				del(rowData.id);
				break;
			default:
				layer.alert("未知的操作类型",{icon: 5});
		}

	});

	/**
	 * 删除方法
	 * */

	var del = function (id) {
		var load = layer.load();
		$.ajax({
			type: "POST",
			url:  path+'/role/delete',
			dataType:"json",
			data:{"id":id},
			success: function (data) {
				layer.close(load);
				layer.msg(data.msg,{icon: 6});

				if(data.code>0){
					var data = {"roleName":$("#roleName").val()}
					tableReload(data);
				}

			},
			error: function (msg) {
				layer.close(load);
				layer.msg("删除失败",{icon: 5})

			}
		});
	}


	/**
	 * 修改新增
	 * @param edit
	 * @param id
	 */
	var addOrUpdateRole = function(edit,id){
		hasSave = false;
		var url = "";
		if(edit)
			url = path+"/role/editRole?id="+id;
		else
			url = path+"/role/addRole";
		var index = layui.layer.open({
			title : " ",
			type : 2,
			content : url,
			success : function(layero, index){
				var body = layui.layer.getChildFrame('body', index);
				setTimeout(function(){
					layui.layer.tips('点此返回菜单列表', '.layui-layer-setwin .layui-layer-close', {
						tips: 3
					});
				},500)
			},
			end:function(){
				if(hasSave) {
					mytable.reload({
						page: {
							curr: 1 //重新从第 1 页开始
						}
						,where:{    //条件
							"params['roleName']":$("#roleName").val(),
						}
						, done: function (res, curr, count) {
						}
					})
				}
			}
		})
		layui.layer.full(index);
		//改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
		$(window).on("resize",function(){
			layui.layer.full(index);
		})
	}

	//绑定
	$("#addRole").click(function(){
		addOrUpdateRole();
	})


    });
</script>
</body>
</html>